@{
    ViewData["Title"] = "Home Page";
}





<div class="container">
    <div class="row">
        <div class="col-12">
            <h2>使用步骤</h2>
            <h4>第一步</h4>
            <p>创建MySql数据库 初始化一个名称是demo的数据库，如果您有数据库，并且表中有数据，可直接跳到<a href="#four">第四步</a>。 </p>
            
            <pre>
-- 创建数据库脚本
create database demo default character set utf8mb4 collate utf8mb4_unicode_ci;
    </pre>
            <h4>第二步</h4>
            <p>在appsettings.json 文件中修改自己的数据库链接字符串,确保能链接到自己的数据库,本示例用的是Mysql数据库.</p>
            <pre>
-- demo.notice definition
CREATE TABLE `notice` (
  `id` varchar(100) NOT NULL COMMENT '主键id',
  `title` varchar(200) DEFAULT '' COMMENT '新闻标题',
  `content` varchar(100) DEFAULT '' COMMENT '新闻内容',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
    </pre>
            <h4>第三步</h4>
            <p>在表中插入查询的数据</p>
            <pre>
    在notice表中插入查询的记录；
    INSERT INTO demo.notice(id, title, content)VALUES(uuid(), '通知名称', '通知内容');
    </pre>
            <h4 id="four">第四步</h4>
            <p >在appsettings.json 文件中修改自己的数据库链接字符串,确保能链接到自己的数据库,本示例用的是Mysql数据库.</p>
            <pre>
    {
        "Logging": {
            "LogLevel": {
                "Default": "Information",
                "Microsoft.AspNetCore": "Warning"
            }
        },
        "DBProvider": "MySql",
        //注意不要换行
        "DBConnectionString": "server=localhost;database=数据库名;user=用户;password=数据库密码;port=端口;
                                pooling=true;max pool size=20;persist security info=True;charset=utf8mb4;",
        "AllowedHosts": "*"
    }
    </pre>
            <h4>第五步</h4>
            <p>在项目目录下创建Component文件夹，并在文件夹下创建部分试图Pagination.cs，目录结构如下</p>
            <img src="/images/component.png" class="rounded" style="width:501px;" />
            <p>代码如下</p>
            <pre>
using NetPageCommon;
using Microsoft.AspNetCore.Mvc;

namespace WebDemo.Component 
{
    public class Pagination: ViewComponent
    {
        public IViewComponentResult Invoke(PageModelSample page)
        {
            // 这里是获取数据和处理逻辑的地方

            return View(page);
        }

    }
}
    </pre>
            <h4>第六步</h4>
            <p>在Shared试图目录中创建Components文件夹，创建部分试图的文件夹Pagination，默认文件名是Default.cshtml，目录结构如下</p>
            <img src="/images/view.png" class="rounded" />
            <p>代码如下</p>
            <pre>
代码请参考程序源码的对应文件
    </pre>
            
            <h4>第七步</h4>
            <p>中自己的controller中定义action,按PageModel实体的格式,返回实体</p>
            <pre>
    public IActionResult Index(int page=1, int size=2)
    {
        int total = 0;
        SqlSugarClient db = DbHelper.GetNewDb();
        List<Notice> notices = db.Queryable<Notice>().ToPageList(page,size,ref total);
        ViewBag.dbconnstring = Common.SystemConfig.DBConnectionString;
        PageModel<Notice> pageModel = new PageModel<Notice>();
        pageModel.url =  "/Notice/Index";
        pageModel.list = notices;
        pageModel.page = page;
        pageModel.size = size;
        pageModel.total = total; 
        return View(pageModel);
    }
    </pre>
            <h4>第八步</h4>
            <p>自己中页面绑定好数据列表,中列表的下方加上如下分页代码</p>
            <pre>
    @@{
        PageModelSample page = new PageModelSample();
        page.total = Model.total;
        page.page = Model.page;
        page.size = Model.size;
        page.url = Model.url;

    } 
    @@await Component.InvokeAsync("Pagination", new { page = page });
    </pre>

            <h4>第九步</h4>
            <p>运行代码,看到分页结果</p>
        </div>
    </div>
</div>


